<template>
  <el-descriptions class="margin-top mb-[10px]" title="" :column="2" border>
    <el-descriptions-item v-for="item in descriptionsList" :key="item.label" :label="item.label">
      <template v-if="item?.type === 'images'">
        <el-image
          style="width: 100px; height: 100px"
          :src="value.url"
          v-for="(value, index) in formData[item.fieldName] || []"
          :key="index"
          :preview-src-list="[value.url]"
        />
      </template>
      <template v-else>
        {{ formData[item.fieldName] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>

  <BasePageTable
    :table-data="formData.workInfo"
    style="height: 240px"
    :table-columns-data="tableColumnsWorkData"
  ></BasePageTable>
  <BasePageTable
    class="mb-[10px]"
    style="height: 240px"
    :table-data="formData.hiddenWorks"
    :table-columns-data="tableColumnsData"
  >
    <template #files="{ row, index }">
      <el-image
        style="width: 100px; height: 100px"
        :src="value.url"
        v-for="(value, index) in row.files || []"
        :key="index"
        :preview-src-list="[value.url]"
      />
    </template>
  </BasePageTable>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const descriptionsList = ref([
  {
    label: "开工日期",
    fieldName: "constructionStartTime",
  },
  {
    label: "预计竣工日期",
    fieldName: "constructionEndTime",
  },
  {
    label: "开工仪式照片",
    fieldName: "constructionStartFile",
    type: "images",
  },
  {
    label: "施工组织方案",
    fieldName: "constructionSchemeFile",
    type: "images",
  },
  {
    label: "施工组织进度表",
    fieldName: "constructionPlanFile",
    type: "images",
  },
  {
    label: "装修许可证",
    fieldName: "constructionPermitFile",
    type: "images",
  },
]);

const tableData = computed(() => {
  const houseConstructionMaterialInstallVO = props.data.houseConstructionMaterialInstallVO || [];
  return houseConstructionMaterialInstallVO.map((item) => {
    return {
      ...item,
      getFile: JSON.parse(item.getFile || "[]"),
      installFile: JSON.parse(item.installFile || "[]"),
    };
  });
});
const formData = computed(() => {
  const {
    constructionStartFile,
    constructionSchemeFile,
    constructionPlanFile,
    constructionPermitFile,
    workInfo,
    hiddenWorks = [],
  } = props.data.houseConstructionSchemeVO || {};
  console.log(workInfo);

  const hiddenWorksList = hiddenWorks.map((item) => {
    return {
      ...item,
      files: JSON.parse(item.files || []),
    };
  });
  return {
    ...props.data,
    ...(props.data.houseConstructionSchemeVO || {}),
    hiddenWorks: hiddenWorksList,
    workInfo: workInfo || [],
    constructionStartFile: JSON.parse(constructionStartFile || "[]"),
    constructionSchemeFile: JSON.parse(constructionSchemeFile || "[]"),
    constructionPlanFile: JSON.parse(constructionPlanFile || "[]"),
    constructionPermitFile: JSON.parse(constructionPermitFile || "[]"),
  };
});

import BasePageTable from "@/components/BasePageTable/index.vue";
import { useDictStore } from "@/store";
const dictStore = useDictStore();
const WorkmanProfessionOptions = dictStore.getDictionary("WorkmanProfession");
const hiddenWorksList = dictStore.getDictionary("HiddenWorks");

const tableColumnsWorkData = ref([
  {
    prop: "name",
    label: "工人姓名",
    showOverflowTooltip: true,
  },
  {
    prop: "mobile",
    label: "联系电话",
    showOverflowTooltip: true,
  },
  {
    prop: "jobText",
    label: "岗位",
    showOverflowTooltip: true,
  },
]);
const tableColumnsData = ref([
  {
    prop: "typeText",
    label: "隐蔽工程",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "files",
    label: "施工照片",
    showOverflowTooltip: true,
    customSlot: "files",
  },
  {
    prop: "remark",
    label: "施工备注",
    showOverflowTooltip: true,
    width: 200,
  },
]);
</script>
